<template>
    <el-dialog :title="dialogText" :visible="true"  width="600px" center :lock-scroll="true" top="40px"
    :close-on-press-escape="false" :close-on-click-modal="false" @close="cancel">
    <el-form ref="form"  label-width="100px">
        <el-form-item label="主题名称" prop="title">
            <el-input v-model="formData.title" placeholder="请输入主题名称" />
        </el-form-item>
    </el-form>
    <span slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {

    data() {
        return {
            dialogText:"添加主题",
            formData: {
                title: "",
            },
            type: "add"
        }
    },
    methods: {

        init(type, row) {
            this.type = type;
            if (type === 'edit') {
                this.dialogText = "编辑主题";
                this.formData = {
                    ...this.formData,
                    ...row
                }
            }
        },
        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh")
        },

        async submitForm() {
            if (!this.formData.title) { this.$message.error("请输入主题名称");}
            const loading = this.$loading();
            const url = this.type === "add" ? "/api/topic/create" : "/api/topic/update";
            const { code } = await this.$fetch.post(url, this.formData);
            if (code === 0) {
                this.$message.success(this.type === "add" ? "添加主题成功" : "修改主题成功");
                this.$nextTick(() => {
                    this.cancel();
                });
            }
            loading.close();
        },


    }
}

</script>







